<template>
	<view class="">
		<view class="" @touchmove.stop.prevent="a = false" @catchtouchmove="a = false" v-show="!loadFlag">
			<view class="" style="">
				<swiper style="height: 100vh;width: 100vw;" :circular="true" @change="swiperChange" :current="activeCurrent">
					<swiper-item v-for="(item,index) in detail.images" :key="index">
						<image :src="item" @click="cssClick" style="height: 100vh;width: 100vw;display: flex;" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="bottom" :class="cssTran ? 'closeCss' : 'openCss'" v-if="!loadFlag">
<!--				<view class="num">{{indexCurrent}} / {{detail.images.length}}</view>-->
        <view class="num" v-if="detail.txt"> {{detail.txt}}</view>
				<view class="nav-box">
					<view class="nav-tab" @click="backClick">
						<u-icon name="/static/icon/back.png" :size="44"></u-icon>
						<text>返回</text>
					</view>
					<view class="nav-tab" @click="collect(detail.id,'set')">
						<u-icon :name="isColl?'/static/icon/coll_art.png':'/static/icon/coll.png'" :size="40"></u-icon>
						<text>{{isColl?'已收藏':'收藏'}}</text>
					</view>
					<view class="nav-tab" @click="downClick(detail._id)">
						<u-icon name="/static/icon/duihuan.png" :size="42"></u-icon>
						<text>下载</text>
					</view>
					<view class="nav-tab" @click="zan(detail.id,'set')">
						<u-icon :name="isZan?'/static/icon/zan_art.png':'/static/icon/zan.png'" :size="isZan?48:42"></u-icon>
						<text>{{isZan?'已点赞':'点赞'}}</text>
					</view>
					<view class="nav-tab">
						<u-icon name="/static/icon/shares.png" :size="44"></u-icon>
						<text>分享</text>
						<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
					</view>
				</view>
			</view>


			<model v-if="loginShow" title="为了更好的玩机体验，快去授权登录吧" btnText="授权登录" @getUserInfo="getUserInfo" @close="loginShow = false"></model>

			<model v-if="downShow" :title="downTitle" :btnText="'看广告领 '+adIntegral+' 积分'" :authorize="false" @close="downShow = false" @save="adClick"></model>

			<model v-if="signShow"
			:authorize="false"
			:title="signTitle"
			btnText="知道了"
			closeText=" "
			@save="signShow = false"></model>

			<model v-show="adShow"
			:authorize="false"
			:ad="true"
			title="已成功保存到相册，别忘了分享给朋友哦！"
			btnText="分享给好友"
			closeText="暂时不用"
			@save="adShow = false"
			@close="adShow = false"></model>
		</view>
		<view class="loading_page" v-show="loadFlag"><image src="/static/loading/loading.gif"></image></view>
	</view>
</template>

<script>
let videoAd = null;

export default {
	data() {
		return {
			loadFlag: true,
			loginShow: false,
			detail: {},

			adIntegral: 0,

			downShow: false,
			downIntegral: 0,
			downTitle: '',
			downBtn: '',
			adShow: false,

			isColl: false,
			isZan: false,

			cssTran: false,
			indexCurrent: 1,
			activeCurrent: 0,

			signShow: false,
			signTitle: '',
		}
	},
	async onLoad(e) {
		var t = this
    if(e.params){
      let params = JSON.parse(e.params);
      let imageUrl = params.url;
      imageUrl = imageUrl.replace("http://", "https://");
      t.detail = params;
      t.detail.images = [imageUrl]
      t.collect(params.id,'get');
      t.zan(params.id,'get');
      t.history(params.id,'imageHistoryList');
    }
    t.loadFlag = false
	},
	methods: {
		async downClick(){
			var that = this
				// 获取图片信息
				var url = that.detail.images[that.indexCurrent-1]
				var extension = url.substring(url.lastIndexOf('.') + 1)
				let fileName = new Date().valueOf();

				uni.downloadFile({
					url: url,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.' + extension,
					success: (res) => {
						var benUrl = res.filePath
						//图片保存到本地相册
						uni.saveImageToPhotosAlbum({
							filePath: benUrl,
							//授权成功，保存图片
							success: function(data) {
								uni.hideLoading()
								that.adShow = true
                that.history(that.detail.id,'imageDownList');
							},
							//授权失败
							fail: function(err) {
								if (err.errMsg) {
									//重新授权弹框确认
									uni.showModal({
										title: '提示',
										content: '无权限，请打开下载权限后再试！',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												//重新授权弹框用户点击了确定
												uni.openSetting({
													//进入小程序授权设置页面
													success(settingdata) {
														if (settingdata.authSetting['scope.writePhotosAlbum']) {
															//用户打开了保存图片授权开关
															uni.saveImageToPhotosAlbum({
																filePath: benUrl,
																success: function(data) {
																	uni.hideLoading()
																	that.adShow = true
																}
															});
														} else {
															//用户未打开保存图片到相册的授权开关
															uni.showModal({
																title: '温馨提示',
																content: '授权失败，请稍后重新获取',
																showCancel: false
															});
														}
													}
												});
											}
										}
									});
								}
								uni.hideLoading()
							}
						});
					},
					fail: (error) => {
						console.log(error)
					}
				})
		},
		backClick(){
			uni.navigateBack()
		},
		async collect(id,type) {
        let t = this;
        let collectKey = 'imageCollectList';
        let collect = t.xcget(collectKey)
        if(collect){
          collect = JSON.parse(collect);
        }else{
          collect = {};
        }
        if(type === 'set'){
          if(collect[id]){
            delete collect[id];
          }else{
            collect[id] = t.detail;
          }
          t.xcset(collectKey,JSON.stringify(collect));
          t.isColl = !t.isColl;
        }else{
          if(collect[id]){
            t.isColl = true;
          }else{
            t.isColl = false;
          }
        }
		},
		async zan(id,type){
      let t = this;
      let zanKey = 'imageZanList';
      let zan = t.xcget(zanKey)
      if(zan){
        zan = JSON.parse(zan);
      }else{
        zan = {};
      }
      if(type === 'set'){
        if(zan[id]){
          delete zan[id];
        }else{
          zan[id] = t.detail;
        }
        t.xcset(zanKey,JSON.stringify(zan));
        t.isZan = !t.isZan;
      }else{
        if(zan[id]){
          t.isZan = true;
        }else{
          t.isZan = false;
        }
      }
		},
    async history(id,key){
      let t = this;
      let list = t.xcget(key)
      if(list){
        list = JSON.parse(list);
      }else{
        list = {};
      }
      list[id] = t.detail;
      t.xcset(key,JSON.stringify(list));
    },
		cssClick() {
			this.cssTran = !this.cssTran
		},

  },
	onShareAppMessage(res) {
		var that = this
		setTimeout(function(){
			that.adShow = false
		},2000)
		return {
			title: '送你一张超级好看的壁纸~',
			imageUrl: that.detail.images[that.indexCurrent-1],
			path: '/pages/index/index?userId='+that.vuex_user._id+'&detailId='+that.detail._id+'&index='+(that.indexCurrent-1)
		}
	},
	onShareTimeline(res) {
		return {
			title: '我等风也等你，近听水无声~',
			path: '/pages/index/index'
		}
	}
}
</script>
<style lang="scss">
	.bottom {
		position: fixed;
		left: 4%;
		right: 0;
		width: 92%;
		height: 52px;
		box-shadow: 0 0px 8px rgba(0, 0, 0, 0.06);
		background: rgba(0, 0, 0, 0.94);
		border-radius: 49px;
		z-index: 10;
		opacity: 0.8;
		.num{
			position: absolute;
			top: -20rpx;
			top: -70rpx;
			left: 44%;
			background: rgba(0,0,0,0.6);
			color: #FFF;
			padding: 4rpx 20rpx;
			font-size: 12px;
			border-radius: 36px;
		}
	}

	.nav-tab {
		position: relative;
		width: 100%;
		height: 52px;
		font-size: 12px;
		color: #D8D8D8;
		font-weight: 400;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.nav-box {
		/* position: absolute; */
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}

	.openCss {
		animation-name: openLinear;
		animation-duration: 0.8s;
		animation-iteration-count: 1;
		bottom: 40px;
	}

	@keyframes openLinear {
		0% {
			transform: translateY(92px);
		}
		100% {
			transform: translateY(0px);
		}
	}

	.closeCss {
		animation-name: closeLinear;
		animation-duration: 0.8s;
		animation-iteration-count: 1;
		bottom: -52px;
	}

	@keyframes closeLinear {
		0% {
			transform: translateY(-92px);
		}
		100% {
			transform: translateY(0px);
		}
	}

	.u-indicator-item-number {
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}
</style>
